import React, { useState, useEffect } from 'react';
import style from './BackgroundStyle.module.css';
import BackgroundStyle1 from '../../assets/images/Recommendedimages/65.png';
import BackgroundStyle2 from '../../assets/images/Recommendedimages/66.webp';
import BackgroundStyle3 from '../../assets/images/Recommendedimages/67.webp';
import BackgroundStyle4 from '../../assets/images/Recommendedimages/68.webp';
import BackgroundStyle5 from '../../assets/images/Recommendedimages/69.webp';
import BackgroundStyle6 from '../../assets/images/Recommendedimages/70.webp';
import BackgroundStyle7 from '../../assets/images/Recommendedimages/71.webp';
import BackgroundStyle8 from '../../assets/images/Recommendedimages/72.webp';
import BackgroundStyle9 from '../../assets/images/Recommendedimages/73.webp';
import BackgroundStyle10 from '../../assets/images/Recommendedimages/74.webp';
import BackgroundStyle11 from '../../assets/images/Recommendedimages/75.webp';
import BackgroundStyle12 from '../../assets/images/Recommendedimages/11.webp';
import BackgroundStyle13 from '../../assets/images/Recommendedimages/77.webp';

function ColorPicker({ colors, onColorSelect }) {
  return (
    <ul className={style.BackgroundStyleUl}>
      {colors.map((color:any) => (
        <li key={color} style={{ background: color }} onClick={() => onColorSelect(color)}></li>
      ))}
    </ul>
  );
}

function ImageGallery({ images, onImageSelect }) {
  return (
    <ul className={style.SimplifiedbackgroundUl}>
      {images.map((src:any) => (
        <li key={src} onClick={() => onImageSelect(src)}>
          <img src={src} alt="" />
        </li>
      ))}
    </ul>
  );
}

function BackgroundStyle() {
  const [selectedColor, setSelectedColor] = useState('');
  
  useEffect(() => {
    const storedColor = localStorage.getItem('color');
    const storedImage = localStorage.getItem('url1');
    
    if (storedColor) {
      setSelectedColor(storedColor);
    }

    return () => {
      localStorage.removeItem('color');
      localStorage.removeItem('url1');
    };
  }, []);

  const handleColorClick = (color:any) => {
    console.log("选中的颜色:", color);
    localStorage.setItem('color', color);
    setSelectedColor(color);
    window.location.reload();
  };
  const handleImageClick = (src:any) => {
    console.log("选中的图片:", src);
    localStorage.setItem('url1', src);
    window.location.reload(); // Use reload instead of changing href
  };
  const colorList = ['#000000', '#666666', '#a8a8a8', '#d9d9d9', '#ffffff', '#ff5b5c', '#ffbd4a', '#fef951', '#99e265', '#2fb4ff', '#5272ff', '#b760e6', '#ffced2', '#ffe9c0', '#d0edd9', '#deefff', '#11f5f1', '#e6d2f7', '#f211c1', '#841be0', '#f20eea'];
  const imageGroups = [
    [BackgroundStyle2, BackgroundStyle3, BackgroundStyle4, BackgroundStyle5],
    [BackgroundStyle6, BackgroundStyle7, BackgroundStyle8, BackgroundStyle9],
    [BackgroundStyle10, BackgroundStyle11, BackgroundStyle12, BackgroundStyle13],
  ];

  return (
    <div className={style.BackgroundStyle}>
      <img src={BackgroundStyle1} alt="" style={{ width: '280px' }} />
      <p className={style.custom}><b>自定义背景</b><span>上传背景图</span></p>
      <ColorPicker colors={colorList} onColorSelect={handleColorClick} />
      {imageGroups.map((group, index) => (
        <div key={index}>
          <p className={style.Simplifiedbackground}><b>简约背景</b><span>全部</span></p>
          <ImageGallery images={group} onImageSelect={handleImageClick} />
        </div>
      ))}
    </div>
  );
}

export default BackgroundStyle;
